<template>
    <div class="search">
        <div class="title search_top">
            <div class="ei">
                <el-icon>
                    <Search />
                </el-icon>
                <h3>筛选搜索</h3>
            </div>
            <div>
                <el-button @click="chongzhi">重置</el-button>
                <el-button type="primary" @click="onSearch">查询搜索</el-button>
            </div>
        </div>
        <div class="search_input">
            <el-form-item label="输入搜索:" label-width="140px" >
            <el-input class="input-width" placeholder="订单编号"
            v-model="form.number"
            ></el-input>
            </el-form-item>

            <el-form-item label="收货人:" label-width="140px">
            <el-input
              class="input-width"
              placeholder="收货人姓名/手机号码"
              v-model="form.name"
            ></el-input>
            </el-form-item>

            <el-form-item label="提交时间:" label-width="140px">
            <el-date-picker
              class="input-width"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="请选择时间"
              v-model="form.time"
            >
            </el-date-picker>
            </el-form-item>

            <el-form-item label="订单状态:" label-width="140px">
                <el-select v-model="form.date" placeholder="全部">
                <el-option label="待付款" value="0" />
                <el-option label="代发货" value="1" />
                <el-option label="已发货" value="2" />
                <el-option label="已完成" value="3" />
                <el-option label="已关闭" value="4" />
                </el-select>
             </el-form-item>

            <el-form-item label="订单分类:" label-width="140px">
                <el-select v-model="form.date1" placeholder="全部">
                <el-option label="正常订单" value="0" />
                <el-option label="秒杀订单" value="1" />
                </el-select>
             </el-form-item>
            
             <el-form-item label="订单来源:" label-width="140px">
                <el-select v-model="form.date2" placeholder="全部">
                <el-option label="PC订单" value="0" />
                <el-option label="APP订单" value="1" />
                </el-select>
             </el-form-item>
  
        </div>
     
        <!-- 数据的展示 -->
        <el-table align="center" :data="tableData" style="width: 100%" :border="true">
            <el-table-column align="center" prop="id" label="编号" width="80" />
            <el-table-column align="center" prop="orderSn" label="订单编号" width="180"/>
            <el-table-column align="center" prop="createTime | formatCreateTime" label="提交时间" width="180" />
            <el-table-column align="center" prop="memberUsername" label="用户账号"/>
            <el-table-column align="center" prop="totalAmount" label="订单金额" width="120"/>
            <el-table-column align="center" prop="payType | formatPayType" label="支付方式" width="120"/>
            <el-table-column align="center" prop="sourceType | formatSourceType" label="订单来源" width="120"/>
            <el-table-column align="center" prop="status | formatStatus" label="订单状态" width="120"/>
            <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button>查看订单</el-button>
            <el-button>关闭订单</el-button>
            <el-button>订单发货</el-button>
            <el-button>订单跟踪</el-button>
            <el-button>删除订单</el-button>
          </template>
        </el-table-column> 
        </el-table>

        <div class="pagination">
            <!-- 分页器 -->
            <el-form-item style="margin-right: 15px; margin-top: 15px">
                <el-select v-model="form.date3" placeholder="批量发货">
                <el-option label="批量发货" value="0" />
                <el-option label="关闭订单" value="1" />
                <el-option label="删除订单" value="2" />
                </el-select>
             </el-form-item>  
            <div style="margin: 15px">  
                 <el-button type="primary">确定</el-button>  
            </div>      
        </div>
        <div>
            <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize" background
                :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>
  
<script setup lang="ts">
import { ref } from 'vue'
import * as api from '../../request/api'
import useTable from '../../hooks/useTables'
import { reactive } from 'vue'
const form = reactive({
    number:'',
    name:'',
    time:'',
    date: '',
    date1: '',
    date2: '',
    date3: ''
})
let name = ref("")
// 重置按钮
let chongzhi = () => {
    form.number='',
    form.name='',
    form.time='',
    form.date = '',
    form.date1 = '',
    form.date2 = ''
}
let { tableData, getTableData, pagination, handleSizeChange, handleCurrentChange } = useTable(api.admin.getOrderQuery, {
    // keyword: name.value  // 可以删掉 name.value 不是一个响应式数据
    keyword: name // name 是响应式的
})
console.log(tableData);

// 添加
let visible = ref(false)
let onAddUser = () => {
    visible.value = !visible.value
}

// 列表数据请求函数调用
getTableData()
let onSearch = async () => {
    console.log(name.value);
    getTableData()

}

</script>
  
<style lang="scss" scoped>
.search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
    padding: 20px;
    flex-wrap: wrap;
    border: 1px solid #ebeef5;

    .search_top {
        width: 100%;
    }

    .search_input {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0 40px;
        padding-top: 20px;
        height: 120px;
        flex-wrap: wrap;

        p {
            width: 87px;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            color: #606266;
            padding: 0 12px 0 0;
            box-sizing: border-box;
        }
    }
}

.title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .ei {
        display: flex;
        align-items: center;

        h3 {
            color: #303133;
            font-size: 14px;
            margin-left: 10px;
        }
    }

    h3 {
        color: #303133;
        font-size: 14px;
        margin-left: 10px;
    }
}
.pagination {
    display: flex;
    justify-content: space-between;
}
</style>
  